<template>
    <div class="header">
        <div class="header-left">
            <i class="iconfont">&#xe624;</i>
        </div>
        <div class="header-serach">
             <i class="iconfont">&#xe632;</i>
            输入城市/景点/游玩主题
        </div>
        <div class="header-right" @click="toCity()">
            <span>{{city}}</span>
            <i class="iconfont">&#xe6aa;</i>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
export default{
    computed:{
        ...mapState(['city'])
    },
    methods:{
        toCity(){
            this.$router.push("/city")
        }
    }
}
</script>
<style scoped lang="stylus">
@import '~css/var.styl';
    .header{
        width:100%;
        line-height: 0.88rem;
        background: $bgColor;
        font-size: 0.36rem;
        color: #fff;
        display: flex;
    }
    .header-left{
        width: 0.4rem;
        font-weight: 600;
        padding:0 0.2rem;
        text-align: center;
    }
    .header-serach{
        flex:1;
        background: #fff;
        height:0.6rem;
        margin: 0.14rem 0;
        border-radius: 0.1rem;
        color: #e4e7ea;
        line-height: 0.6rem;
        font-size:0.28rem;
        padding-left:0.2rem;
    }
   .header-right{
       font-size:0.28rem;
       padding:0 0.2rem;
   }

</style>